<template>
  <div ref="rootRef" class="pg_login">
    <canvas
      id="root"
      :width="canvasEl.width"
      :height="canvasEl.height"
      class="pg_login_canvas"
    />
    <div class="pg_login_wrapper">
      <div class="wp_user">
        <el-form ref="formElRef" :model="loginForm" :rules="LoginRules">
          <el-form-item class="wp_user_title">
            <p>你好，欢迎登陆铁头娃子管理系统</p>
          </el-form-item>
          <el-form-item prop="loginName">
            <el-input
              v-model="loginForm.loginName"
              maxlength="20"
              type="password"
              placeholder="请输入用户名"
              @keydown.enter="submit"
            />
          </el-form-item>
          <el-form-item prop="password">
            <el-input
              v-model="loginForm.password"
              maxlength="20"
              type="password"
              placeholder="请输入密码"
              @keydown.enter="submit"
            />
          </el-form-item>

          <div
            v-loading="loadingState"
            class="wp_user_submit"
            @click.stop="submit"
          >
            登录
          </div>
        </el-form>
      </div>
      <div class="wp_tips">
        <p>
          Copyright &copy; Taiping Life Insurance Co.,Ltd 铁头娃子儿有限公司
        </p>
        <p>
          铁头娃子儿管理系统支持
          <span>IPv6</span> 网络
        </p>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts" name="TtwzLogin">
import { LoginRules } from '@/constant'
import { useCanvasAnimate } from '@/hooks'
import type { LoginInfo } from '@/types'
import { encrypts } from '@/utils'
import { getToken } from '@/mock'
import { type FormInstance, type FormValidateCallback } from 'element-plus'
import { GlobalSessionKey } from '@/constant'

const router = useRouter()
const route = useRoute()
const { canvasEl, initCanvasAnimate } = useCanvasAnimate()

const formElRef = ref<FormInstance>()
const loadingState = ref<boolean>(false)
const rootRef = ref<HTMLElement>()
const loginForm = reactive<LoginInfo>({
  loginName: '',
  password: '',
})

async function submit() {
  const data = JSON.parse(JSON.stringify(loginForm))

  if (!formElRef.value) return

  formElRef.value.validate(((valid: boolean) => {
    if (!valid) return false

    handleLogin(data)
  }) as FormValidateCallback)
}

async function handleLogin(data: LoginInfo) {
  loadingState.value = true
  try {
    const ttwzLoginInfo = await getToken(data)

    const cryptoStr = encrypts(JSON.stringify(ttwzLoginInfo))
    window.sessionStorage.setItem(GlobalSessionKey, cryptoStr)
    loadingState.value = false
    goNextPage()
  } catch (error) {
    ElMessage.error((error as Error).message)
    loadingState.value = false
  }
}

function goNextPage() {
  const path = (decodeURIComponent((route.query.redirect ?? '') as string) ||
    '/home') as string
  router.replace({
    path,
  })
}

onMounted(() => {
  initCanvasAnimate(rootRef as Ref<HTMLElement>)
})
</script>

<style lang="scss" scoped>
.pg_login {
  min-width: 1100px;
  min-height: 100vh;
  background: url('@/images/bg.png') no-repeat;
  background-size: 100% 100%;
  @include flex(row, center, center);

  &_canvas {
    position: absolute;
    z-index: 1;
    pointer-events: none;
  }

  &_wrapper {
    min-width: 1100px;
    height: 630px;
    text-align: center;
    background: url('@/images/fre.png') no-repeat;
    background-size: 100%;
    @include flex(column, center, center);

    .wp_user {
      width: 480px;
      padding: 15px 20px;
      background-color: #fff;
      border-radius: 10px;
      @include flex(column, center, center);

      &_title {
        :deep(.el-form-item__content) {
          justify-content: center;
        }

        p {
          font-size: 20px;
          font-weight: 500;
        }
      }

      :deep(.el-form) {
        width: 85%;

        .el-form-item {
          margin-bottom: 30px;
        }
      }

      .form_user_suffix {
        color: #666;
      }

      &_remember {
        margin-bottom: 15px !important;
      }

      &_submit {
        display: inline-block;
        width: 244px;
        padding: 12px 0;
        font-size: 16px;
        color: #fff;
        text-align: center;
        text-shadow: rgb(0 0 0 / 30%) 0 0 1px;
        letter-spacing: 5px;
        background: linear-gradient(to right, #01a6ff, #0187ff);
        border-radius: 25px;
      }
    }

    .wp_tips {
      width: 400px;
      margin-top: 20px;
      font-size: 12px;
      border-radius: 5px;

      p {
        margin-bottom: 10px;

        span {
          padding: 0 6px;
          color: #3a96ff;
          border: 1px solid #3a96ff;
          border-radius: 25px;
        }
      }
    }
  }

  :deep(.el-autocomplete) {
    width: 100%;
  }

  :deep(.el-popper) {
    left: 0 !important;
  }
}
</style>
